<script>
import { ref } from "vue";
export default {
  setup() {
    let mobiles = ref([]);
    let apps = ref([]);
    let showBindApp = ref(false);
    return {
      mobiles,
      apps,
      showBindApp,
    };
  },
  async mounted() {
    try {
      const res = await fetch("/api/phone/get").then((res) => res.json());
      this.mobiles = res.data || [];
    } catch (e) {
      console.log(e);
    }
  },
  methods: {
    async bindApp(mobile) {
      this.showBindApp = true;
      this.mobile = mobile;
      const res = await fetch("/api/app/get").then((res) => res.json());
      this.apps = res.data || [];
    },
    async save() {
      await fetch("/api/bind/apps", {
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          mobile: this.mobile.phoneNumber,
          apps: this.apps.filter((app) => app.checked),
        }),
      });
    },
    selectAll() {
      this.apps.forEach((app) => {
        app.checked = !app.checked;
      });
    },
  },
};
</script>

<template>
  <div class="sw_mobile_container">
    <table>
      <tr>
        <td>序号</td>
        <td>手机号</td>
        <td>操作</td>
      </tr>
      <tr v-for="(mobile, mobileIndex) in mobiles" :key="mobileIndex">
        <td>{{ mobiles.length - mobileIndex }}</td>
        <td>{{ mobile.phoneNumber }}</td>
        <td><button @click="bindApp(mobile)">绑定app</button></td>
      </tr>
    </table>
  </div>
  <div v-if="showBindApp">
    <div v-for="(app, index) in apps" :key="index">
      <span>{{ app.name }}</span
      ><input type="checkbox" v-model="app.checked" />
    </div>
    <div>
      <button @click="selectAll">全选</button>
      <button @click="save">保存</button>
      <button @click="showBindApp = false">关闭</button>
    </div>
  </div>
</template>

<style lang="less">
.sw_mobile_container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  .sw_mobile {
    font-size: 16px;
    padding: 15px 50px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
}
</style>
